<!DOCTYPE html>
<html lang="zh" class="app">
<head>
    <title>数据交换单元节点定义</title>
    <#include "../../../__ref_common_css.ftl" parse=true/>
    <link rel="stylesheet" href="${mvcPath}/dacp-lib/CodeMirror/lib/codemirror.css">
    <link rel="stylesheet" href="${mvcPath}/dacp-lib/CodeMirror/addon/fold/foldgutter.css">
    <link rel="stylesheet" href="${mvcPath}/dacp-lib/CodeMirror/addon/display/fullscreen.css">
    <link rel="stylesheet" href="${mvcPath}/dacp-view/datastash/workshop/step_define/step_define.css">
</head>
<body>
    <div id="main">
        <elx-main split-type="row">
            <elx-header>
                <el-form :inline="true" :model="filterData">
				    <el-form-item label="指令">
				    	<el-input v-model="filterData.stepInstLabel" placeholder="请输入指令"></el-input>
				    </el-form-item>
				    <el-form-item class="button-group">
				    	<el-button type="primary" @click="handleSearch">查询</el-button>
				    	<el-button type="primary" @click="handleAdd">添加</el-button>
				    </el-form-item>
				</el-form>
			</elx-header>
			<elx-scroll-content ref="scrollContent" @resize="resize">
				<el-table v-loading="tableLoading" :data="tableData" border :height="tableHeight" style="width: 100%" @selection-change="handleSelectionChange">
			        <el-table-column prop="stepSeq" width="55" label="序号" show-overflow-tooltip></el-table-column>
			        <el-table-column prop="stepInst" label="指令" show-overflow-tooltip></el-table-column>
			        <el-table-column prop="stepInstLabel" label="指令名称" show-overflow-tooltip></el-table-column>
			        <el-table-column prop="stepIcon" label="指令图标" show-overflow-tooltip></el-table-column>
			        <el-table-column prop="stepType" label="指令类型" show-overflow-tooltip></el-table-column>
			        <el-table-column prop="groupType" label="指令归属组" show-overflow-tooltip></el-table-column>
			        <el-table-column prop="stepStyle" label="指令样式" show-overflow-tooltip></el-table-column>
			        <el-table-column prop="stepState" label="指令状态" :formatter="stateFormat" show-overflow-tooltip></el-table-column>
			        <el-table-column label="操作" width="80">
				        <template scope="scope">
				            <el-tag type="primary" @click.native="handleEdit(scope.row)">
				                <span class="uex-icon-edit"></span>
				            </el-tag>

                            <el-tag type="primary" @click.native="handleDelete(scope.$index, scope.row)">
                                <span class="uex-icon-delete"></span>
                            </el-tag>
						</template>
					</el-table-column>
                    <el-table-column type="expand">
                        <template scope="scope">
                            <el-form :model="scope.row" label-width="90px" label-suffix=": ">
					            <el-form-item label="指令配置">
					                <el-input type="textarea" :disabled="true" :rows="4" v-model="scope.row.stepCfg"></el-input>
					            </el-form-item>
					        </el-form>
                        </template>
                    </el-table-column>
			    </el-table>
			</elx-scroll-content>
			<elx-footer v-show="total>filterData.pageSize">
			    <div class="pagination-container">
				    <el-pagination
				        @size-change="handleSizeChange"
				        @current-change="handleCurrentChange"
				        :current-page="filterData.pageNum"
				        :page-size="filterData.pageSize"
				        layout="total, sizes, prev, pager, next"
				        :total="total">
				    </el-pagination>
			   </div>
		   </elx-footer>
			   
			<el-dialog size="large" :title="dialogTitle" :visible.sync="dialogFormVisible">
	            <el-form :model="formData" :rules="ruleFormRules" ref="validateForm" label-width="90px" label-suffix=": ">
				    <el-form-item label="序号" prop="stepSeq">
				    	<el-input v-model.number="formData.stepSeq" placeholder="请输入序号" auto-complete="off"></el-input>
				    </el-form-item>
				    <el-form-item label="指令">
				    	<el-input v-model="formData.stepInst" placeholder="请输入指令" :disabled="oper=='edit'"></el-input>
				    </el-form-item>
				    <el-form-item label="指令名称">
				    	<el-input v-model="formData.stepInstLabel" placeholder="请输入指令名称"></el-input>
				    </el-form-item>
				    <el-form-item label="指令图标">
				    	<el-input v-model="formData.stepIcon" placeholder="请输入指令图标"></el-input>
				    </el-form-item>
				    <el-form-item label="指令类型">
				        <el-select v-model="formData.stepType" placeholder="请选择指令类型">
	     					<el-option label="dp" value="dp"></el-option>
	      					<el-option label="datax" value="datax"></el-option>
	      					<el-option label="stream" value="stream"></el-option>
	   					</el-select>
				    </el-form-item>
				    <el-form-item label="指令归属组">
				        <el-select v-model="formData.groupType" placeholder="请选择指令归属组">
	     					<el-option :key="$index" v-for="(label, $index)option in groupOptions" :label="label" :value="$index"></el-option>
	   					</el-select>
				    </el-form-item>
				    <el-form-item label="指令样式">
				        <el-select v-model="formData.stepStyle" placeholder="请选择指令归属组">
	      					<el-option label="image" value="image"></el-option>
	      					<el-option label="swimlane" value="swimlane"></el-option>
	   					</el-select>
				    </el-form-item>
				    <el-form-item label="指令状态">
				        <el-radio-group v-model="formData.stepState">
	      					<el-radio v-for="(item, $index) in stateOptions" :label="$index">{{item}}</el-radio>
	    				</el-radio-group>
				    </el-form-item>
				    <el-form-item label="指令配置">
				        <elx-codemirror v-model="formData.stepCfg" :option="codeMirrorOption" height="300px"></elx-codemirror>
				    </el-form-item>
    			</el-form>
    			
    			<span slot="footer" class="dialog-footer">
					<el-button @click.native.prevent="handleCancel">取 消</el-button>
					<el-button type="primary" @click.native="handleSave">保 存</el-button>
				</span>	
   			</el-dialog>  
        </elx-main>
    </div>
    
    <script src="${mvcPath}/dacp-lib/CodeMirror/lib/codemirror.js"></script>
    <script src="${mvcPath}/dacp-lib/CodeMirror/lib/util/extend.js"></script>
    <script src="${mvcPath}/dacp-lib/CodeMirror/lib/util/beautify.js"></script>
    
    <script src="${mvcPath}/dacp-lib/CodeMirror/addon/hint/show-hint.js"></script>
    <script src="${mvcPath}/dacp-lib/CodeMirror/addon/fold/foldgutter.js"></script>
    <script src="${mvcPath}/dacp-lib/CodeMirror/addon/fold/foldcode.js"></script>
    <script src="${mvcPath}/dacp-lib/CodeMirror/addon/fold/brace-fold.js"></script>
    <script src="${mvcPath}/dacp-lib/CodeMirror/addon/fold/indent-fold.js"></script>
    <script src="${mvcPath}/dacp-lib/CodeMirror/addon/fold/markdown-fold.js"></script>
    <script src="${mvcPath}/dacp-lib/CodeMirror/addon/fold/comment-fold.js"></script>
    
    <script src="${mvcPath}/dacp-lib/CodeMirror/addon/display/fullscreen.js"></script>
    <script src="${mvcPath}/dacp-lib/CodeMirror/addon/search/searchcursor.js"></script>
    
    <script src="${mvcPath}/dacp-lib/CodeMirror/mode/javascript/javascript.js"></script>
	
	<#include "../../../__ref_common_js.ftl" parse=true/>
	
    <script src="${mvcPath}/dacp-res/js/json_format.js"></script>
    
    <script src="${mvcPath}/dacp-lib/vuex/vuex.min.js"></script>
    <script src="${mvcPath}/dacp-view/datastash/workshop/step_define/step_define.js"></script>
</div>
</body>
</html>